<template>
	<div>
		<amisEditor theme="cxd" className="is-fixed"  v-if="schema&&amisEnv" :isMobile="isMobile" :preview1="true" :preview="isPreview"
		:value="schema" :amisEnv="amisEnv" :onChange="setSchema" />
	</div>
</template>

<script setup name="Build">
	import {
		Editor
	} from 'amis-editor';
	import {
		applyPureReactInVue
	} from 'veaury';
	const amisEditor = applyPureReactInVue(Editor)
	
	import '@/assets/styles/amisCxd.css';
	import '@/assets/styles/amisEditorCoreStyle.css';
	// import "amis-ui/lib/themes/cxd.css";
	// import "amis-editor-core/lib/style.css";
	import 'amis/lib/themes/cxd.css';
	import '@fortawesome/fontawesome-free/css/all.css';
	import '@fortawesome/fontawesome-free/css/v4-shims.css';
	import 'amis/sdk/helper.css';
	import 'amis/sdk/iconfont.css';

	import { ElMessage ,ElMessageBox} from 'element-plus'
	
	import {
		details,
		save
	} from "@/api/tool/formManage";
	import request from '@/utils/request'
	import copy from 'copy-to-clipboard'
	import axios from 'axios'
	import {
		alert,
		confirm
	} from 'amis'
	const router = useRouter();
	const route = useRoute();
	//dom ref
	const formInfoRef = $ref(false),
		//数据
		loading = $ref(false),
		formKey = $ref(''),
		formTitle = $ref(''),
		formEditorData = $ref(null),
		isPreview = $ref(false),
		isMobile = $ref(false),
		schema = $ref(null),
		amisEnv = $ref(null);

	//从线上获取表单数据
	function getFormData(init) {
		// 定义变量 formKey 为当前表单的唯一标识符，formEditorData 从本地存储中获取表单编辑器数据。
		let data = localStorage.getItem('formEditorData');
		// 判断本地存储中是否存在表单编辑器数据，如果存在则使用 JSON.parse 方法将字符串转换为对象，否则将 formEditorData 赋值为空对象。
		if (data) {
			data = JSON.parse(data)
		} else {
			data = {}
		}
		// 如果 data 中不存在当前表单键名，则在 data 中添加该表单，并设置其键名及属性值。
		if (!data[formKey]) {
			data[formKey] = {
				formKey
			}
		}
		// 将处理后的 data 对象赋值给组件实例上的 formEditorData 属性。
		formEditorData = data

		if (init) {
			setSchema(formEditorData[formKey].schema)
			return
		}
		loading = true
		details(formKey).then(res => {
			if (res.code == 200 && res.data) {
				// 如果请求成功且返回数据不为空，则将 res.data 中的表单标题和表单描述更新到 formEditorData 对应表单的属性中。
				formEditorData[formKey].formTitle = res.data.formTitle
				formEditorData[formKey].formDesc = res.data.formDesc

				formEditorData[formKey].isCreateTable = res.data.isCreateTable
				formEditorData[formKey].openHis = res.data.openHis
				formEditorData[formKey].tableName = res.data.tableName
				formEditorData[formKey].exist = true
				if (formEditorData[formKey].schema && JSON.stringify(formEditorData[formKey].schema) != res
					.data.json) {
					// 如果 formEditorData 中对应表单存在 schema 属性并且与 res.data.json 不相等，则弹出确认框提示是否加载线上数据。
					ElMessageBox.confirm('是否加载线上数据，加载后将覆盖本地数据，请谨慎选择!', '提示', {
							confirmButtonText: '加载',
							cancelButtonText: '取消'
						})
						.then(() => {
							// 确认后将 res.data.json 转换成对象并更新到 formEditorData 对应表单的 schema 属性中，并触发 setSchema 方法。
							formEditorData[formKey].schema = JSON.parse(res.data.json)
							setSchema(formEditorData[formKey].schema)
						}).catch(() => {
							// 取消后只触发 setSchema 方法
							setSchema(formEditorData[formKey].schema)
						})
				} else {
					// 如果 formEditorData 中对应表单不存在 schema 属性或者与 res.data.json 相等，则直接触发 setSchema 方法。
					setSchema(JSON.parse(res.data.json))
				}
			} else {
				// 如果请求失败或者返回数据为空，则直接触发 setSchema 方法。
				setSchema(formEditorData[formKey].schema)
			}
		}).finally(() => {
			loading = false;
		})
	}

	function setSchema(e) {
		schema = e || {}
		console.log(schema)
		formEditorData[formKey].schema = schema
		localStorage.setItem('formEditorData', JSON.stringify(formEditorData))
	}

	function setAmisEnv() {
		amisEnv = {
			// 下面三个接口必须实现
			fetcher: ({
				url,
				method,
				data,
				responseType,
				config,
				headers
			}) => {
				return request({
					url,
					method,
					data,
					amis: true
				})
			},
			isCancel: e => axios.isCancel(e),
			alert,
			notify: (type, msg) => {
				// toast[type]
				//   ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
				//   : console.warn('[Notify]', type, msg)
				ElMessage({
					message: msg,
					duration: 2000,
					showClose: true,
					type: type
				})
				console.log('[notify]', type, msg, toast)
			},
			confirm,
			copy: (contents, options = {}) => {
				const ret = copy(contents, options)
				ret &&
					(!options || options.shutup !== true) &&
					ElMessage({
						showClose: true,
						message: '内容已拷贝到剪切板',
						type: 'info',
						duration: 2000
					})
				return ret
			}
		}
	}

	function saveData() {
		if (formTitle) {
			//业务表单
			let form = {
				formKey,
				formTitle,
				formDesc: '',
				isCreateTable: false,
				tableName: '',
				openHis: false,
				json: JSON.stringify(schema),
			}
			loading = true
			save(form).then(res => {
				if (res.code == 200) {
					ElMessage({
						message: '保存成功',
						type: 'success',
						showClose: true,
					})
					router.go(-1)
				}
			}).finally(() => {
				loading = false;
			})
		} else {
			formInfoRef.open(formEditorData[formKey])
		}
	}

	setAmisEnv()
	formKey = route.query.formKey
	formTitle = route.query.formTitle
	if (!formKey) {
		ElMessage({
			message: '加载失败',
			type: 'error',
			showClose: true,
			duration: 2000
		})
	} else {
		getFormData(route.query.init)
	}
</script>

<style lang='scss' scoped>
	:deep(.is-fixed) {
		top: 58px;
	}
	:deep(.ae-Preview-body) {
		box-sizing:border-box !important; 
	}
	:deep(.ae-Settings-content.hoverShowScrollBar) {
		box-sizing:border-box !important; 
	}
	:deep(.preview) {
		.ae-Editor-hlbox{
			display: none !important; 
		}
	}
	.header {
		border-bottom: 1px solid #d4d6d9;
		padding: 10px 30%;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		div:first-child {
			font-size: 24px;
			font-weight: bold;
		}
	}
</style>